<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>组件-本质上是一个构造函数</title>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>

<body>
  <div id='app'>
   <scope-comp></scope-comp>
  </div>
  <div id="todolistcomp"></div>
</body>
<script>

  // 比如说,定义一个全局组件
  // Vue.component 内部调用了 Vue.extend方法.
  // Vue.component('todo-list',{
  //   template:`<div>
  //       <h1>{{ title }}</h1>
  //     </div>
  //   `,
  //   data () {
  //     return {
  //       title: '这是全局组件'
  //     }
  //   }
  // })

  // console.log('TodoList' in Vue)

  // 等价于
  const TodoList = Vue.extend({
    template:`<div><h1>{{ title }}</h1></div>`,
    data () {
      return {
        title:'Vue.extend 创建的组件构造函数,使用new的方式创建并挂载'
      }
    }
  })

  console.log(TodoList)

  new TodoList().$mount('#todolistcomp')

  // 还有一个局部组件
  const scopeComp = {
    template:`<div>{{title}}</div>`,
    data () {
      return {
        title: '用 object 搭配 components 的方式去创建局部组件'
      }
    }
  }

  var app = new Vue({
    el: '#app',
    data: {},
    methods: {},
    filters: {},
    directives: {},
    components: {
      scopeComp // 等价于 Vue.extend(scopeComp)
    },
  })
</script>

</html>